<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>流量分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../common/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="../css/nav.css">
    <link rel="stylesheet" href="../css/TrafficAna.css">
    <script type="text/javascript" src="../jsplug/echarts.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<ul class="layui-nav">
    <div class="admin-logo-box">
        <a class="logo" href="#">
            <img src="../../common/images/logo1.png" alt="" width="50%" height="70%">
        </a>
    </div>
    <div class="leftNav">
        <li class="layui-nav-item">
            <a href="index.html">首页</a>
        </li>
        <li class="layui-nav-item">
            <a href="securityTab.html">安全分析</a>
            <dl class="layui-nav-child">
                <dd><a href="securityTab.html">可视化</a></dd>
                <dd><a href="securityAna.html">攻击事件</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="TrafficAna.html">流量分析</a>
        </li>
        <li class="layui-nav-item">
            <a href="fileLoad.html">日志管理</a>
            <dl class="layui-nav-child">
                <dd><a href="fileLoad.html">上传日志</a></dd>
                <dd><a href="javascript:;">配置管理</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item" lay-unselect="">
            <a href="javascript:;"><img src="../../common/images/user.jpg" class="layui-nav-img">我</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="../../login.html">退出系统</a></dd>
            </dl>
        </li>
    </div>
</ul>
<div style="margin-top: 15px;">
    <!-- 示例-970 -->
    <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
</div>
<!-- //banner -->
<div class="mainContent">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
            <!--发起访问最多的源IP地址-->
            <div class="source-ip-statics">
                <span class="source-ip-title">发起访问最多的源IP地址</span>
                <div class="source-ip-charts" id="main5" style="width: 600px;height: 300px;"></div>
                <script type="text/javascript">
                    var chart1=echarts.init(document.getElementById('main5'));
                    option = {
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            right:'right',
                            top:'bottom',

                            data: ['172.31.214.1','172.31.214.2','172.31.214.3','172.31.214.4','172.31.214.5']
                        },
                        series : [
                            {
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:[
                                    {value:800, name:'172.31.214.1'},
                                    {value:700, name:'172.31.214.2'},
                                    {value:600, name:'172.31.214.3'},
                                    {value:500, name:'172.31.214.4'},
                                    {value:300, name:'172.31.214.5'}
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    chart1.setOption(option);
                </script>
            </div>
        </div>
        <div class="layui-col-md6">
            <!--被访问最多的目的IP地址-->
            <div class="dest-ip-statics">
                <span class="dest-ip-title">被访问最多的目的IP地址</span>
                <div class="dest-ip-charts" id="main6" style="width: 600px;height: 300px;"></div>
                <script type="text/javascript">
                    var chart2=echarts.init(document.getElementById('main6'));
                    option = {

                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            right:'right',
                            top:'bottom',

                            data: ['192.214.31.1','192.214.31.2','192.214.31.3','192.214.31.4','192.214.31.5']
                        },
                        series : [
                            {
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:[
                                    {value:200, name:'192.214.31.1'},
                                    {value:550, name:'192.214.31.2'},
                                    {value:300, name:'192.214.31.3'},
                                    {value:400, name:'192.214.31.4'},
                                    {value:700, name:'192.214.31.5'}
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    chart2.setOption(option);
                </script>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
            <!--本月出入防火墙流量趋势图-->
            <div class="month-flow-statics">
                <span class="month-flow-title">本月出入防火墙流量趋势图</span>
                <div class="month-flow-charts" id="main7" style="width: 600px;height: 300px;"></div>
                <script type="text/javascript">
                    var chart3=echarts.init(document.getElementById('main7'));
                    option = {
                        xAxis: {
                            name:'时间',

                            type: 'category',

                        },
                        yAxis: {
                            name:'流量',

                            type: 'value'
                        },
                        series: [{
                            data: [820, 932, 901, 934, 1290, 1330, 820],
                            type: 'line'
                        }]
                    };



                    chart3.setOption(option);
                </script>
            </div>
        </div>
        <div class="layui-col-md6">
            <!--协议组别访问情况-->
            <div class="protocol-access-statics">
                <span class="protocol-access-title">协议组访问情况</span>
                <div class="protocol-access-chart" id="main8" style="width: 600px;height: 300px;"></div>
                <script type="text/javascript">
                    var chart4=echarts.init(document.getElementById('main8'));
                    option = {
                        xAxis: {
                            name:'占比',
                            type: 'category',
                            data: ['FTP', 'Mail', 'Web', 'Dns', 'Smtp']
                        },
                        yAxis: {
                            name:'IP地址',
                            type: 'value'
                        },
                        series: [
                            {
                                type: 'bar',
                                barWidth : 60,
                                data: [423489, 229034, 304970, 131744, 530230],
                                itemStyle: {
                                    normal:{
                                        color: function (params){
                                            var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'];
                                            return colorList[params.dataIndex];
                                        }
                                    },
                                }
                            },
                        ]
                    };


                    chart4.setOption(option);
                </script>
            </div>
        </div>
    </div>
    </div>

<!--<div class="layui-footer">© JamesZhan-Lab514 版权所有</div>-->
<script src="../../common/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>
</body>
</html>